<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>dev-tools</title>
    <style>
        .center {
            position: fixed;
            left: 50%;
            width: 50%;
            -webkit-transform: translateX(-50%);
        }

        h1 {
            background-color: #676a6c;
            color: white;
            text-align: center;
        }

        textarea {
            width: 100%;
        }

        input {
            width: 100%;
        }

        #error {
            background-color: red;
            color: white;
        }
    </style>
</head>
<body>
<h1>dev-tools</h1>
<p id="error"></p>
<div class="center">
    <div><textarea placeholder="please input your code" rows="25" id="code" name="code"></textarea></div>
    <div><input placeholder="please input your host address" id="address" name="address"/></div>
    <div style="text-align: center">
        <button onclick="javascript:void(0)" id="submit">submit</button>
    </div>
</div>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function () {
        $("#submit").click(function () {

            code = $("#code").val();
            address = $("#address").val();

            $("#error").text("waiting");

            $.post("${SubmitNewCodeUrl}",
                {"code": code, "address": address},
                function (data, status) {
                    $("#error").text(data)
                });
        });
    });
</script>
</body>
</html>